<!-- 手工派工：蹇泽阳 -->
<template>
  <div class="app-container">
    <!-- 打印汇总表 -->
    <div class="printContent2">
      <div style="width: 100%; height: 750px" v-for="item in printArr">
        <div class="center size-24 title">{{ $t(`Print.SummaryOfMaterialPreparationAndDispatchOrdersManual`) }}</div>
        <div class="header">
          <span>{{ $t(`Print.Operator`) }}:{{ item.name }}</span>
          <span>{{ $t(`Print.DispatchDate`) }}:{{ item.dispatchDateDuring }}</span>
          <span>{{ $t(`Print.DateOfPrinting`) }}:{{ item.printDate }}</span>
        </div>
        <div class="mainTable">
          <table style="text-align: center; font-size: 16px; margin-top: 10px">
            <tr>
              <td class="size-16 center">{{ $t(`Print.DispatchDate`) }}</td>
              <td class="size-16 center">{{ $t(`Print.Body`) }}</td>
              <td class="size-16 center">{{ $t(`Print.Directives`) }}</td>
              <td class="size-16 center">{{ $t(`Print.Craft`) }}</td>
              <td class="size-16 center">{{ $t(`Print.Place`) }}</td>
              <td class="size-16 center">{{ $t(`Print.DispatchPairs`) }}</td>
            </tr>
            <tr v-for="item2 in item.arr">
              <td class="size-16 center">{{ item2.dispatchDate }}</td>
              <td class="size-16 center">{{ item2.style }}</td>
              <td class="size-16 center">{{ item2.lotNo }}</td>
              <td class="size-16 center">{{ item2.process }}</td>
              <td class="size-16 center">{{ item2.partName0 }}</td>
              <td class="size-16 center">{{ item2.dispatchQty }}</td>
            </tr>
            <tr>
              <td colspan="6" class="size-16 right">{{ $t(`Print.TotalCutting`) }}:{{ item.total }}</td>
            </tr>
          </table>
        </div>
        <div class="mainTable footer">
          <span style="margin-right: 100px">{{ $t(`Print.PunchingSectionLeader`) }}:</span>
          <span>{{ $t(`Print.Operator`) }}:</span>
        </div>
      </div>
    </div>

    <div style="width: 100%; height: auto" class="printContent">
      <div class="center size-24 title">{{ printObj.company + $t(`Print.MaterialPreparationWorkOrderManual`) }}</div>
      <table class="no-border">
        <tr>
          <td width="30%"></td>
          <td class="center size-16" width="30%">
            ({{ $t(`Print.DateOfPrinting`) }}:<span>{{ printObj.dispatchDate }}</span
            >)
          </td>
          <td class="size-16" width="30%">
            {{ $t(`Print.DispatchTicketNumber`) }}: <span>{{ printObj.dispatchType }}</span>
          </td>
        </tr>
      </table>

      <div class="headerTable">
        <table class="no-border">
          <tr>
            <td class="size-16 left">{{ $t(`Print.DateOfManufacture`) }}:{{ printObj.dispatchDate }}</td>
            <td class="size-16 center">{{ $t(`Print.OrderVolume`) }}:{{ printObj.orderQtyStr }}</td>
            <td class="size-16 right">{{ $t(`Print.Rounds`) }}:{{ printObj.lsNoStr }}</td>
          </tr>
          <tr>
            <td class="size-16 left">{{ $t(`Print.Operator`) }}:{{ printObj.workerName }}</td>
            <td class="size-16 center">{{ $t(`Print.Dispatchers`) }}:{{ printObj.dispatchName }}</td>
            <td class="size-16 right">{{ $t(`Print.ChongdaoNo`) }}:{{ printObj.lotHead.cutNo }}</td>
          </tr>
          <tr>
            <td class="size-16 left">{{ $t(`Print.Directives`) }}:{{ printObj.lotHead.lotNo }}</td>
            <td class="size-16 center">{{ $t(`Print.Body`) }}:{{ printObj.lotHead.style }}</td>
            <td class="size-16 right">{{ $t(`Print.Color`) }}:{{ printObj.lotHead.color }}</td>
          </tr>
        </table>
      </div>
      <div class="mainTable">
        <table style="text-align: center; font-size: 16px; margin-top: 10px">
          <tr v-for="item in printObj.partList">
            <td class="size-16 center" v-for="item2 in item">{{ item2 }}</td>
          </tr>
        </table>
      </div>
    </div>

    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div class="flex">
          <el-button class="primaryBth" type="primary" size="default" @click="insert">{{ $t(`Print.InsertDispatchProfile`) }}</el-button>
          <el-button class="primaryBth" type="primary" size="default" @click="printSummary">{{ $t(`Print.PrintTheSummaryTable`) }}</el-button>
          <el-button class="primaryBth" type="primary" size="default" @click="removeList">{{ $t(`Print.Delete`) }}</el-button>
        </div>
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
          @selectList="selectTableList"
          @download="download"
        />
        <el-card shadow="never" :body-style="{ padding: '5px' }">
          <PageModule
            :PageData="{ total, buttonS: true }"
            :pageSize="pageSize"
            @pageSizeChange="handleSizeChange"
            @pageChange="handleCurrentChange"
          />
        </el-card>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">{{ $t(`Print.DispatchNumberDetails`) }}</h1>
        <Table :tableHeader="tableHeader2" :tableData="tableData2" class="mt10" :isLoading="isLoading2" />
      </el-card>
    </div>

    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex AIC" style="flex-direction: column">
        <Find :OriginalFilter="{ static: true }" :formList="formList10" @findClicked="findClicked10" @selectListShow="selectListShow" />
        <div class="flex mt10 JCC" style="width: 100%; background-color: white">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div class="flex mb10">
              <!-- <el-select @visible-change="(visible: boolean) => selectVisibleChange2(visible)"
                            v-model="number" multiple collapse-tags collapse-tags-tooltip placeholder="号码"
                            style="width: 120px" class="JSelect">
                            <el-option v-for="item1 in numberOptions" :key="item1.optionKey" :label="item1.optionLabel"
                                :value="item1.optionValue" />
                        </el-select> -->
              <el-button :disabled="insertDis" class="primaryBth ml10" type="primary" size="default" @click="drawerInsert">{{
                $t(`Print.InsertDispatcher`)
              }}</el-button>
              <el-select
                @change="getSelectedListsChange"
                :placeholder="$t(`Print.Number`)"
                v-model="getSelectedLists"
                ref="selectRef"
                @visible-change="handleVisibleChange"
                multiple
                filterable
                clearable
              >
                <!--              <el-option v-for="V in getSelectedListsValue" :key="V" :value="V"></el-option>@click="getChildren"  -->
              </el-select>
            </div>
            <el-table
              ref="TRef"
              v-loading="treeIsLoading"
              @selection-change="selectionChangeTree"
              :data="treeData"
              style="width: 100%; margin-bottom: 20px"
              row-key="title"
              border
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column prop="title" :label="$t(`Print.Position_Number_Round`)" width="200" />
              <el-table-column
                prop="qty"
                :label="$t(`Print.TheNumberOfDispatchedWorkers_EvenNumberThatCanBeIssued_EvenNumberThatCanBeIssued`)"
                width="250"
                align="center"
              />
              <el-table-column prop="remainQty" :label="$t(`Print.TheActualNumberOfDispatchedWorkers`)" width="100" align="center">
                <template #default="scope">
                  <el-input @change="treeInputChange(scope.row)" :disabled="!scope.row.change" v-model="scope.row.remainQty" />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <div class="flex AIC">
              <h1 class="f16 mr10">{{ $t(`Print.ManualPersonnelInformationOfTheDay`) }}</h1>
              <el-input style="height: 26px; width: 120px" v-model="user" :placeholder="$t(`Print.Employee`)" clearable></el-input>
              <el-button type="primary" class="primaryBth ml10" @click="searchUser">{{ $t(`Print.Inquire`) }}</el-button>
            </div>
            <h5 style="color: red">{{ $t(`Print.Inquire`) }}</h5>
            <Table :tableHeader="tableHeader11" :tableData="tableData11" class="mt10" @currentRow="currentRow11" />
          </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import formDataReq from '@/utils/formDataReq'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ManualDispatch'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce, throttle } from 'lodash'
import { onMounted, watch } from 'vue'

// 插入派工资料模块
const number = ref('')
const numberOptions = ref([]) as any
const user = ref('')
const insert = () => {
  drawer.value = true
  getUserList()
  treeData.value = []
  formList10.value[1].selectValue = ''
  formList10.value[2].selectValue1 = []
  formList10.value[2].selectOptions = []
  formList10.value[2].disabled = true
  formList10.value[3].selectValue1 = []
  formList10.value[3].selectOptions = []
  formList10.value[3].disabled = true
}
const tableHeader11 = ref([
  {
    label: '工号',
    prop: 'workerId'
  },
  {
    label: '员工',
    prop: 'name'
  },
  {
    label: '部门名称',
    prop: 'deptName'
  },
  {
    label: '已派工数量',
    prop: 'qty'
  }
])
const tableData11 = ref([])
const dispatchDate = ref('')
const getUserList = async () => {
  const date = new Date()
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数
  const hours = String(date!.getHours()).padStart(2, '0') // 小时
  const minutes = String(date!.getMinutes()).padStart(2, '0') // 分钟
  const seconds = String(date!.getSeconds()).padStart(2, '0') // 秒
  // 返回格式化的日期时间字符串
  dispatchDate.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  const res2 = (await service.post(`/plan/dispatch/worker/list?dispatchDate=${dispatchDate.value}&searchKey=${user.value}`)) as any
  tableData11.value = res2
}
const searchUser = () => {
  getUserList()
}
const currentTable11Row = ref({}) as any
const currentRow11 = async (row: any = tableData11.value[0]) => {
  currentTable11Row.value = row
}
const selectListShow = async (visible: any, item: any) => {
  if (Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '选择指令' && !visible) {
    getSelectBW()
  }
}
const getSelectBW = async () => {
  formList10.value[2].disabled = true
  formList10.value[3].disabled = true
  // 轮次工艺查询
  const res2 = (await service.post(`/plan/dispatch/lsNo/list?lotNo=${formList10.value[1].selectValue}`)) as any
  if (res2) {
    formList10.value[2].selectOptions.slice(0, formList10.value[2].selectOptions.length)
    formList10.value[3].selectOptions.slice(0, formList10.value[3].selectOptions.length)
  }
  res2.lsNo.forEach((item: any) => {
    formList10.value[2].selectOptions?.push({
      optionKey: item,
      optionLabel: item,
      optionValue: item
    })
  })
  res2.process.forEach((item: any) => {
    formList10.value[3].selectOptions?.push({
      optionKey: item,
      optionLabel: item,
      optionValue: item
    })
  })
  formList10.value[2].disabled = false
  formList10.value[3].disabled = false
}
const formList10 = ref([
  {
    type: 'dateSingle',
    dateLabel: '生产日期',
    dateValue: ''
  },
  {
    type: 'selectJ',
    selectValue: '',
    selectP: '选择指令',
    selectLabel: '',
    selectOptions: []
  },
  {
    disabled: true,
    type: 'select1',
    selectValue1: '',
    selectP: '轮次',
    selectLabel: '',
    selectOptions: []
  },
  {
    disabled: true,
    width: '500px',
    type: 'select1',
    maxCollapse: 6,
    selectValue1: '',
    selectP: '工艺',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
]) as any
const drawer = ref(false)
watch(drawer, async (newVal) => {
  if (newVal === false) {
    formList10.value[2].selectOptions = []
    formList10.value[3].selectOptions = []
    await getTableList()
    await getLotNoList()
  }
})
const insertDis = ref(false)
const treeInputChange = (row: any) => {
  if (Number(row.remainQty) > row.qty) {
    insertDis.value = true
    JMessage.warning('派工数量不能大于可发数量')
    return
  } else {
    insertDis.value = false
  }
}
const treeIsLoading = ref(false)
const findClicked10 = async (content: string) => {
  if (content === '查询') {
    getTreeList()
  }
  if (content === '置空') {
    formList10.value[2].selectOptions = []
    formList10.value[3].selectOptions = []

    formList10.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
      item.selectValue1 = ''
    })
  }
}
const editTreeDataTitle = (item: any) => {
  item.title1 = item.title.key
  item.title = item.title.value
  if (item.children && item.children.length > 0) {
    item.children.forEach((item2: any) => {
      editTreeDataTitle(item2)
    })
  }
  return item
}
const getTreeList = async () => {
  treeIsLoading.value = true
  const lsNos = [] as any
  const process = [] as any
  if (formList10.value[2].selectValue1 && formList10.value[3].selectValue1) {
    for (const key in formList10.value[2].selectValue1) {
      lsNos.push(formList10.value[2].selectValue1[key])
    }
    for (const key in formList10.value[3].selectValue1) {
      process.push(formList10.value[3].selectValue1[key])
    }
  } else {
    JMessage.error('选择轮次和工艺')
    return
  }
  treeData.value = []
  const res = (await LoginWork.post(`/plan/dispatch/tree/list?lotNo=${formList10.value[1].selectValue}&lsNos=${lsNos}&process=${process}`)) as any
  if (res.code === 200) {
    setChange(res.data)
    treeData.value = res.data.map((item: any, index: any) => {
      editTreeDataTitle(item)
      return item
    })
    treeIsLoading.value = false
  } else {
    JMessage.error(res.message)
  }
}
const setChange = (data: any) => {
  data.forEach((item: any) => {
    if (item.type === 'label') {
      item.change = 'Y'
    } else {
      setChange(item.children)
    }
  })
}
const tableHeader10 = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数',
    prop: 'orderQty'
  },
  {
    label: '外加工项目',
    prop: 'partName'
  }
])
const treeData = ref([]) as any
const tableData10 = ref([])
const selectedLists10 = ref([])
const selectTableList10 = (selectedList: any) => {
  selectedLists10.value = selectedList
}
const currentTable10Row = ref({}) as any
const currentRow10 = async (row: any = tableData10.value[0]) => {
  currentTable10Row.value = row
  let table10Data = await service.post<any, any>(`/Outgoing/getNumberDetailsList`, row)
  tableData10.value = table10Data
}
const drawerInsert = async () => {
  if (!formList10.value[0].dateValue) {
    JMessage.warning('请选择生产日期')
    return
  }
  if (!formList10.value[1].selectValue) {
    JMessage.warning('请选择指令')
    return
  }
  if (!currentTable11Row.value.workerId) {
    JMessage.warning('请选择操作员')
    return
  }
  if (currentSelectTree.value.length === 0) {
    JMessage.warning('请选择数据')
    return
  }
  const arr = currentSelectTree.value.map((item: any) => {
    item.qty = item.remainQty
    return item
  })
  insertDis.value = true
  const res = (await LoginWork.post(
    `/plan/dispatch/sg/doDispatch?lotNo=${formList10.value[1].selectValue}&dispatchDate=${
      formList10.value[0].dateValue + ' 00:00:00'
    }&manulWorkerId=${currentTable11Row.value.workerId}`,
    arr
  )) as any
  if (res.code === 200) {
    insertDis.value = false
    // drawer.value = false
    JMessage.success(res.message)
    getTableList()
    download({ dispatchType: res.data })
    getTreeList()
    getUserList()
    // 下拉框重复问题
    getSelectBW()
  } else {
    JMessage.error(res.message)
  }
}

const formList = ref([
  {
    type: 'date',
    dateLabel: '生产日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入工序部位',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入操作员',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '打印状态',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '财务审核',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
]) as any

// 表一模块
const tableHeader = ref([
  {
    width: '120px',
    label: '生产日期',
    prop: 'dispatchDate'
  },
  {
    label: '指令号',
    prop: 'lotNo'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    width: 80,
    label: '工序部位',
    prop: 'partName'
  },
  {
    label: '操作人员',
    prop: 'workerName'
  },
  {
    label: '开始轮数',
    prop: 'lsNo'
  },
  {
    label: '截止轮数',
    prop: 'lsNo2'
  },
  {
    label: '派工数量',
    prop: 'dispatchQty'
  },
  {
    label: '派工人员',
    prop: 'dispatchName'
  },
  {
    width: '120px',
    label: '派工标签',
    prop: 'dispatchType'
  },
  {
    label: '派工单打印',
    prop: 'printFlag'
  },
  {
    label: '财务审核',
    prop: 'salaryFlag'
  },
  {
    width: '120px',
    type: 'function',
    label: '操作',
    prop: [{ label: '打印派工单', bgColor: '#1C84C6' }]
  }
])
// 表一按钮
const findClicked = (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let formData = new FormData()
  formData.append(
    'params[beginTime]',
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '生产日期')
      .dateValue?.[0] || ''
  )
  formData.append(
    'params[endTime]',
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '生产日期')
      ?.dateValue?.[1] || ''
  )
  formData.append(
    'lotNo',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
    )?.inputValue
  )
  formData.append(
    'partName',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入工序部位'
    )?.inputValue
  )
  formData.append(
    'workerName',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入操作员'
    )?.inputValue
  )
  formData.append(
    'printFlag',
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '打印状态')?.selectValue
  )
  formData.append(
    'salaryFlag',
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '财务审核')?.selectValue
  )

  formData.append('pageNum', String(currentPage.value))
  formData.append('pageSize', String(pageSize.value))
  let tableDataList = await formDataReq.post<any, any>('/plan/dispatch/list', formData)
  isLoading.value = false
  tableData.value = tableDataList.data.list.map((item: any) => {
    item.partName1 = item.partName.key
    item.partName = item.partName.value
    item.partName01 = item.partName0.key
    item.partName0 = item.partName0.value
    return item
  })
  total.value = tableDataList.data.total
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  currentTableRow.value.partName0 = currentTableRow.value.partName01
  currentTableRow.value.partName = currentTableRow.value.partName1
  getTableList2()
}
const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
  selectedLists.value.forEach((item: any) => {
    item.partName0 = item.partName01
    item.partName = item.partName1
  })
}
const removeList = async () => {
  if (selectedLists.value.length === 0) {
    JMessage.error('请勾选要删除的指令')
    return
  }
  const res = (await LoginWork.post('/plan/dispatch/delete', selectedLists.value)) as any
  if (res.code === 200) {
    JMessage.success('删除成功')
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
// 打印派工单
const printObj = ref({
  lotHead: {
    cutNo: '',
    lotNo: '',
    style: '',
    color: ''
  }
}) as any
const download = async (row: any) => {
  const res = (await LoginWork.post(`/plan/dispatch/print?dispatchType=${row.dispatchType}`)) as any
  printObj.value = res.data
  console.log(res.data)
  setTimeout(() => {
    const qrCodeContainer = document.querySelector<any>('.printContent')
    console.log(11111111111, qrCodeContainer)

    if (qrCodeContainer) {
      qrCodeContainer.style.display = 'block'
      const printWindow = window.open('', '_blank')
      printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印派工单</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto; 
              margin: 3mm;
            }
            @media print {
                /* 打印时的样式 */
             
                
                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
            .headerTable {
                height: auto;
                border: 0px solid #000;
                text-align: center;
                display: flex;
                margin: 20px 20px 0px;
                vertical-align: top;
            }
            .title {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
            }

            .center {
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .left {
                text-align: left;
            }

            .no-padding {
                padding: 0;
            }

            .no-margin {
                margin: 0;
            }

            .margin-5 {
                margin: 5px;
            }

            .margin-top-5 {
                margin-top: 5px;
            }

            .margin-top-15 {
                margin-top: 15px;
            }

            .size-8 {
                font-size: 8px !important;
            }

            .size-10 {
                font-size: 10px;
            }

            .size-12 {
                font-size: 12px;
            }

            .size-14 {
                font-size: 14px;
            }

            .size-16 {
                font-size: 17px;
            }

            .size-18 {
                font-size: 18px;
            }

            .size-24 {
                font-size: 24px;
            }

            #date-tip {
                position: relative;
            }

            span.tip {
                display: inline-block;
                height: 14px;
                line-height: 14px;
                margin-right: 30px;
            }

            table {
                font-size: 10px;
                border-collapse: collapse;
                border-spacing: 0;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                width: 100%;
            }

            table th,
            table td {
                border: 1px solid #000;
                font-size: 12px;
            }

            table.no-border,
            table.no-border th,
            table.no-border td {
                border: 0px;
            }

            table td.no-left-border {
                border-left: 0px;
            }

            table td.no-right-border {
                border-right: 0px;
            }

            .mainTable {
                margin: 0 20px;
            }

            /* 备料派工单汇总表 */
            .header {
                display: flex;
                justify-content: space-evenly;
            }

            .footer {
                margin-top: 20px;
                margin-right: 100px;
                display: flex;
                justify-content: right;
            }

           
           
            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

      // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
      const cloneContainer = qrCodeContainer.cloneNode(true)
      printWindow!.document.body.appendChild(cloneContainer)

      printWindow!.document.write(`
        </body>
      </html>
    `)
      printWindow!.document.close()

      // 开始打印
      printWindow!.print()

      // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
      qrCodeContainer.style.display = 'none'
    }
  }, 500)
  const res2 = (await LoginWork.post(`/plan/dispatch/updatePrintStatus?dispatchNo=${row.dispatchType}`)) as any
  if (res2.code !== 200) {
    JMessage.error(res2.message)
  }
}

// 表二
const tableHeader2 = ref([
  {
    label: '号码',
    prop: 'sizeNo'
  },
  {
    label: '派工量',
    prop: 'qty'
  }
])
const tableData2 = ref([])
const isLoading2 = ref(true)
const total2 = ref(0)
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>('/plan/dispatch/detail/list', {
    ...currentTableRow.value
  })
  isLoading2.value = false
  tableData2.value = tableDataList
  // currentRow2()
}, 500)

const getSelectList = async () => {
  formList.value[4].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: ' ',
      optionLabel: '全部'
    },
    {
      optionKey: '已打印',
      optionValue: 'Y',
      optionLabel: '已打印'
    },
    {
      optionKey: '未打印',
      optionValue: 'N',
      optionLabel: '未打印'
    }
  )
  formList.value[5].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: ' ',
      optionLabel: '全部'
    },
    {
      optionKey: '已审核',
      optionValue: 'Y',
      optionLabel: '已审核'
    },
    {
      optionKey: '未审核',
      optionValue: 'N',
      optionLabel: '未审核'
    }
  )
  getLotNoList()
}
const getLotNoList = async () => {
  formList10.value[1].selectOptions = []
  // 指令查询
  const res = (await service.post('/plan/dispatch/lotNo/page/combo')) as any
  res.forEach((item: any) => {
    formList10.value[1].selectOptions?.push({
      value: item.lotNo,
      label: item.lotNo
    })
  })
}
onMounted(() => {
  getSelectList()
})
// 打印汇总表
const printArr = ref([]) as any
const printSummary = async () => {
  if (formList.value[0].dateValue === '') {
    JMessage.warning('请选择生产日期')
    return
  }
  const arr = []
  const beginDate = formList.value[0].dateValue[0] + ' 00:00:10'
  const endDate = formList.value[0].dateValue[1] + ' 23:59:59'
  const res = (await LoginWork.post(`/plan/dispatch/summary/print?beginDate=${beginDate}&endDate=${endDate}`)) as any
  for (const key in res.data.worker2HeadMap) {
    arr.push({
      name: key,
      arr: res.data.worker2HeadMap[key].map((item: any) => {
        item.partName1 = item.partName.key
        item.partName = item.partName.value
        return item
      }),
      total: res.data.worker2HeadMap[key].reduce((previousValue: any, currentValue: any) => previousValue + currentValue.dispatchQty, 0),
      printDate: res.data.printDate,
      dispatchDateDuring: res.data.dispatchDateDuring
    })
  }
  printArr.value = arr
  setTimeout(() => {
    const qrCodeContainer = document.querySelector<any>('.printContent2')
    if (qrCodeContainer) {
      qrCodeContainer.style.display = 'block'
      const printWindow = window.open('', '_blank')
      printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印汇总表</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto; 
              margin: 3mm;
            }
            @media print {
                /* 打印时的样式 */
             
                
                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
            .headerTable {
                height: auto;
                border: 0px solid #000;
                text-align: center;
                display: flex;
                margin: 20px 20px 0px;
                vertical-align: top;
            }



            .title {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
            }

            .center {
                text-align: center;
            }

            .right {
                text-align: right;
            }

            .left {
                text-align: left;
            }

            .no-padding {
                padding: 0;
            }

            .no-margin {
                margin: 0;
            }

            .margin-5 {
                margin: 5px;
            }

            .margin-top-5 {
                margin-top: 5px;
            }

            .margin-top-15 {
                margin-top: 15px;
            }

            .size-8 {
                font-size: 8px !important;
            }

            .size-10 {
                font-size: 10px;
            }

            .size-12 {
                font-size: 12px;
            }

            .size-14 {
                font-size: 14px;
            }

            .size-16 {
                font-size: 17px;
            }

            .size-18 {
                font-size: 18px;
            }

            .size-24 {
                font-size: 24px;
            }

            #date-tip {
                position: relative;
            }

            span.tip {
                display: inline-block;
                height: 14px;
                line-height: 14px;
                margin-right: 30px;
            }

            table {
                font-size: 10px;
                border-collapse: collapse;
                border-spacing: 0;
                border-collapse: collapse;
                border-spacing: 0;
                empty-cells: show;
                width: 100%;
            }

            table th,
            table td {
                border: 1px solid #000;
                font-size: 12px;
            }

            table.no-border,
            table.no-border th,
            table.no-border td {
                border: 0px;
            }

            table td.no-left-border {
                border-left: 0px;
            }

            table td.no-right-border {
                border-right: 0px;
            }

            .mainTable {
                margin: 0 20px;
            }

            /* 备料派工单汇总表 */
            .header {
                display: flex;
                justify-content: space-evenly;
            }

            .footer {
                margin-top: 20px;
                margin-right: 100px;
                display: flex;
                justify-content: right;
            }

           
           
            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

      // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
      const cloneContainer = qrCodeContainer.cloneNode(true)
      printWindow!.document.body.appendChild(cloneContainer)

      printWindow!.document.write(`
        </body>
      </html>
    `)
      printWindow!.document.close()

      // 开始打印
      printWindow!.print()

      // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
      qrCodeContainer.style.display = 'none'
    }
  }, 500)
}

//_______________________________________________________________________________________________________________________________________________________________________________
//号码选择器（树）
let getSelectedLists: any = ref([]) //当前选中的项列表
let getSelectedListsValue: any = ref([]) //选项
let TRef: any = ref(null) as any // 表格选中的状态

const getChildren = throttle(() => {
  getSelectedListsValue.value = []
  let g: any = ref<Array<any>>([])
  treeData.value.forEach((item: any) => {
    item.children.forEach((item2: any) => {
      g.value.push(item2)
      // item2.children.forEach((item3: any) => {
      //   g.value.push(item3)
      // })
    })
  })
  removeDuplicates(g.value).forEach((item: any) => {
    getSelectedListsValue.value.push(item.title)
  })
}, 1000)

let Fi: any = [] //父级项列表
let Frow: any = [] //子级项列表（交互）
let Crow: any = [] //子级项列表（全选）
let sFrow: any = [] //子级项列表（全子）
const getSelectedListsChange = (e: any) => {
  //后面清空选项状态，先储存当前选中的项列表
  const rowItems: any = TRef.value.getSelectionRows()
  Crow = []
  Crow = e
  Fi = []
  Frow = []

  treeData.value.forEach((item: any) => {
    if (rowItems.includes(item)) {
      Fi.push(item)
    }

    item.children.forEach((item3: any) => {
      sFrow.push(item3)
      if (rowItems.includes(item3)) {
        Frow.push(item3)
      }
    })
  })
  // 选项重新赋值
  Fi.forEach((item: any, index: number) => {
    if (rowItems.includes(item)) {
      TRef.value.toggleRowSelection(Fi[index], true)
    }
  })
  Frow.forEach((item: any, index: number) => {
    if (!e.includes(item.title) && rowItems.includes(item)) {
      TRef.value.toggleRowSelection(Frow[index], false)
    }
  })
  if (e.length == 0) {
    TRef.value.clearSelection()
  }
}
const currentSelectTree = ref([]) as any
var selectionChangeTreeTOarr: any = []
const selectionChangeTree = async (newSelection: any[]) => {
  currentSelectTree.value = []
  /// 号码过滤
  selectionChangeTreeTOarr = newSelection.filter((item: any) => item.children.length === 0)
  //号码回响
  getSelectedListsADDarr()
  currentSelectTree.value = selectionChangeTreeTOarr
}

const getSelectedListsADDarr = () => {
  const n: any = TRef.value.getSelectionRows()
  getSelectedLists.value = n.filter((i: any) => i.type === 'size').map((i: any) => i.title)
  getSelectedLists.value = [...new Set(getSelectedLists.value)].sort((a: any, b: any) => a - b)
}
const selectRef = ref(null) as any
const handleVisibleChange = () => {
  // 如果不应该显示下拉列表，则强制关闭它
  selectRef.value.blur()
}

// 去重函数
const removeDuplicates = (nodes: any[]): any[] => {
  const seenTitles = new Set()
  const uniqueNodes = []
  for (const node of nodes) {
    if (!seenTitles.has(node.title)) {
      seenTitles.add(node.title)
      uniqueNodes.push(node)
    }
  }
  return uniqueNodes
}
//-
</script>

<style scoped>
:deep(.el-table__row tr.current-row > td) {
  background-color: #ffe080 !important;
  color: #fff;
}

:deep(.el-table .el-table__cell) {
  padding: 0;
}

:deep(.el-table__body tr:first-child) {
  background-color: white;
  color: black;
}

.JSelect {
  width: 150px;
}

/* 打印 */
.printContent {
  display: none;
}

.headerTable {
  height: auto;
  border: 0px solid #000;
  text-align: center;
  display: flex;
  margin: 20px 20px 0px;
  vertical-align: top;
}

.title {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.margin-5 {
  margin: 5px;
}

.margin-top-5 {
  margin-top: 5px;
}

.margin-top-15 {
  margin-top: 15px;
}

.size-8 {
  font-size: 8px !important;
}

.size-10 {
  font-size: 10px;
}

.size-12 {
  font-size: 12px;
}

.size-14 {
  font-size: 14px;
}

.size-16 {
  font-size: 17px;
}

.size-18 {
  font-size: 18px;
}

.size-24 {
  font-size: 24px;
}

#date-tip {
  position: relative;
}

span.tip {
  display: inline-block;
  height: 14px;
  line-height: 14px;
  margin-right: 30px;
}

table {
  font-size: 10px;
  border-collapse: collapse;
  border-spacing: 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  width: 100%;
}

table th,
table td {
  border: 1px solid #000;
  font-size: 12px;
}

table.no-border,
table.no-border th,
table.no-border td {
  border: 0px;
}

table td.no-left-border {
  border-left: 0px;
}

table td.no-right-border {
  border-right: 0px;
}

.mainTable {
  margin: 0 20px;
}

/* 备料派工单汇总表 */
.header {
  display: flex;
  justify-content: space-evenly;
}

.footer {
  margin-top: 20px;
  margin-right: 100px;
  display: flex;
  justify-content: right;
}
</style>
